﻿<!DOCTYPE html>

<html>

<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
    @Scripts.Render("~/Resource/js/fe.head.js")
</head>

<body>
    <div id="app" v-cloak>
        <div class="edit_pagecontainer">
            <div class="edit_formcontainer">
                <el-form ref="form" :model="form" :label-width="labelWidth" :rules="rules">
                    <el-form-item label="元件标题" prop="ElementTitle">
                        <el-input v-model="form.ElementTitle"></el-input>
                    </el-form-item>
                    <el-form-item label="数据路由" prop="ElementDataUrl">
                        <el-input v-model="form.ElementDataUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="更多路由">
                        <el-input v-model="form.ElementMoreUrl"></el-input>
                    </el-form-item>
                    <el-form-item label="模板路径" prop="ElementTemplatePath">
                        <el-input v-model="form.ElementTemplatePath"></el-input>
                    </el-form-item>
                    <el-form-item label="元件说明">
                        <el-input v-model="form.ElementExplain"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-radio v-model="form.ElementStatus" :label="1">启用</el-radio>
                        <el-radio v-model="form.ElementStatus" :label="0">禁用</el-radio>
                    </el-form-item>
                    <el-form-item label="排序">
                        <el-input v-model="form.OrderNum"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="edit_opcontainer">
            <el-button type="primary" v-on:click="handleSubmit">添 加</el-button>
            <el-button v-on:click="close">取 消</el-button>
        </div>
    </div>
</body>
@Scripts.Render("~/Resource/js/fe.foot.js")
<script>
    var addUrl = GetRootPath() + "Frame/Element/OperateAdd";
    var pageData = {
        //data
        form: {
            ElementTitle: '',
            ElementDataUrl: '',
            ElementMoreUrl: '',
            ElementTemplatePath: '',
            ElementExplain: '',
            ElementStatus: 1,
            OrderNum: 0,
        },
        rules: {
            ElementTitle: [{
                    required: true,
                    message: '请输入元件名称',
                    trigger: 'blur'
                },

            ],
            ElementDataUrl: [{
                    required: true,
                    message: '请输入数据路由',
                    trigger: 'blur'
                },

            ],
            ElementTemplatePath: [{
                    required: true,
                    message: '请输入模板路径',
                    trigger: 'blur'
                },

            ],

        },
        //css
        labelWidth: '100px'
    };

    new Vue({
        el: '#app',
        data: pageData,
        mounted: function () {

        },
        methods: {
            handleSubmit: function () {
                this.$refs["form"].validate((valid) => {
                    if (valid) {
                        JsonAjaxPost(addUrl, JSON.stringify(pageData.form), function (data,
                            status) {
                            if (data.code == 0) {
                                OpenSuccess('提示', '添加成功！', function () {
                                    CloseDialog();
                                })
                            } else {
                                OpenFail('提示', data.msg)
                            }
                        })
                    }
                });
            },
            close: function () {
                CloseDialog();
            },
        }
    })
</script>

</html>
